<template>
  <div>
    <FormDialogComponent
      ref="formtDialogRef"
      dialogWidth="1200px"
      v-model="form"
      :formInline="true"
      dialogTitle="模拟生产"
      :autoTitle="false"
      :formHeader="formHeader"
      :formUrl="urls.API_URL_BACKSTAGE_MES_PRODUCTIONORDER_SIMULATEPRODUCTION"
      :showFormFoot="false"
      :showDialogConfirmButton="false"
      dialogCancelButtonText="关闭"
      formAction="put"
      @dialogClosed="dialogClosed"
      @beforeFormSubmit="beforeFormSubmit"
      @afterFormSubmitFailure="afterFormSubmitFailure"
    >
      <template #form_auditor>
        <!--审核人-->
        <el-input v-if="form.auditor" v-model="form.auditor!.nickName!" :disabled="true" placeholder="审核人" />
        <el-input v-else :disabled="true" placeholder=" " />
      </template>
      <!--表单提交的自定义内容 -->
      <template #form_orderSteps>
        <!--生产步骤明细-->
        <ProductionOrderStepTable :orderId="form.id!" v-model="form.steps" @afterOperateProductionOrderStepSuccess="loadProductionOrder(form.id!)" />
      </template>
      <!--对话框按钮-->
      <template #dialog_foot_left>
        <el-button
          v-show="form.status === 'completed' && (form.auditResult == null || form.auditResult == false)"
          type="primary"
          @click="productionOrderAudit"
          >整车检查</el-button
        >
      </template>
    </FormDialogComponent>
    <!-- 整车审核对话框组件 -->
    <ProductionOrderAuditDialog ref="productionOrderAuditDialog" @afterSubmitSuccess="loadProductionOrder(form.id!)" />
  </div>
</template>

<script setup lang="ts">
import FormDialogComponent from '@/components/base/table/form/FormDialogComponent.vue';
import ProductionOrderStepTable from '@/views/page/mes/productionorder/ProductionOrderStepTable.vue';
import ProductionOrderAuditDialog from '@/views/page/mes/productionorder/ProductionOrderAuditDialog.vue';
import type { FormHeader, TableData } from '@/types/interface/base_interface';
import type { WmsMaterialInventoryDetail, WmsMaterialInventoryDetailRelocation } from '@/types/interface/wms_interface';
import { nextTick, onMounted, ref } from 'vue';
import urls from '@/api/request/urls';
import Request from '@/api/request/request';
import type { ProductionOrder } from '@/types/interface/mes_interface';
import { getDict } from '@/api/dict';

// 接收父容器参数
interface Props {
  action?: string; // 表单的处理类型，post表示提交，put表示编辑
}
const props = withDefaults(defineProps<Props>(), {
  action: 'put'
});

let productionOrderId: string | undefined; //生产订单ID

//表单==========================================================
//表单对象
const form = ref<ProductionOrder>({});
//表单元素类型
const formHeader = ref<FormHeader[]>([]);
onMounted(async () => {
  //下拉框
  const productionOrderStatusDict = await getDict('汽车生产订单状态', 'string');
  const isInspectionPassedDict = await getDict('审核状态', 'boolean');
  // 添加编辑表单
  formHeader.value = [
    {
      label: '生产订单信息',
      prop: 'orderDivider',
      type: 'divider'
    },
    {
      label: '生产订单号',
      prop: 'id',
      disabled: true
    },
    {
      label: '车辆识别号',
      prop: 'vin',
      disabled: true
    },
    {
      label: '生产状态',
      prop: 'status',
      type: 'select',
      list: productionOrderStatusDict,
      disabled: true
    },
    {
      label: '开始生产时间',
      prop: 'startTime',
      disabled: true,
      placeholder: ' '
    },
    {
      label: '结束生产时间',
      prop: 'endTime',
      disabled: true,
      placeholder: ' '
    },
    {
      label: '审核人',
      prop: 'auditor',
      type: 'custom',
      disabled: true
    },
    {
      label: '审核状态',
      prop: 'auditResult',
      type: 'select',
      list: isInspectionPassedDict,
      placeholder: ' ',
      disabled: true
    },
    {
      label: '审核意见',
      prop: 'auditNote',
      disabled: true,
      placeholder: ' '
    },
    {
      label: '创建时间',
      prop: 'createTime',
      disabled: true
    },
    {
      label: '最后更新时间',
      prop: 'updateTime',
      disabled: true,
      placeholder: ' '
    },
    {
      label: '生产订单步骤',
      prop: 'orderStepDivider',
      type: 'divider'
    },
    {
      label: '步骤详情',
      prop: 'orderSteps',
      type: 'customTemplate'
    }
  ];
});
//初始化表单信息
const initForm = () => {
  //传入初始值
  form.value = {};
};
//===================================对话框====================================================
const formtDialogRef = ref();
//加载生产订单
const loadProductionOrder = async (id: string) => {
  const resData: any = await new Request(`${urls.API_URL_BACKSTAGE_MES_PRODUCTIONORDER}/${id}`).get();
  if (resData.success) {
    form.value = resData.data;
  }
};
const openDialog = async (id: string) => {
  //获取生产订单id
  productionOrderId = id;
  //加载生产订单信息
  await loadProductionOrder(id);
  //加载完数据再打开对话框
  await formtDialogRef.value.openDialog();
};
const closeDialog = () => {
  //关闭对话框
  formtDialogRef.value.closeDialog();
};
//添加表单关闭后触发
const dialogClosed = async () => {
  //通过重新赋值，重置物料信息
  // initForm();
  // delete form.value.materialBatch;
};
//在表单提交前要处理的事
const beforeFormSubmit = async () => {
  //封装要提交的对象。主要是封装目标库位信息
};
//在表单提交失败后
const afterFormSubmitFailure = async () => {
  //因为表单信息大部分都是disabled的，因此在添加失败后要重新将原来获取加载数据。
  await loadProductionOrder(productionOrderId!);
};

//==============================整车生产操作====================================================
const productionOrderAuditDialog = ref();
const productionOrderAudit = () => {
  productionOrderAuditDialog.value.openDialog(form.value.id);
};

defineExpose({
  // 参考vue3官方文档，需要将函数暴露出去才能被父组件调用，setup模式是不暴露的
  openDialog,
  closeDialog
});
</script>

<style scoped></style>
